<!DOCTYPE html>
<html lang="en">
<!-- mouseover和mouseenter的区别 -->
<!-- 他们两个的区别是，mouseover添加时会有冒泡事件，会触发多次，但是mouseenter没有冒泡事件，只会触发一次，对应的是mouseleave与他 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用interval 来写动画函数</title>
    <style>
        .zhu {
            position: absolute;
            left: 0px;
            top: 50px;
            width: 100px;
            height: 50px;
            background-color: pink;
        }
        
        .fu {
            position: absolute;
            left: 0px;
            top: 100px;
            width: 100px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <button>点击我fu会走动哦</button>
    <div class="zhu"></div>
    <!-- 必须要将盒子变为定位元素才能将其移动 -->
    <div class="fu">
        <span>who are you</span>
    </div>
    <script>
        function tranfer(obj, det) { //用函数来封装，使代码更加的方便
            clearInterval('obj.timer'); //如果不添加这一句，每次点击都会产生一个定时器，这样他的移动速度会变得很快，这一步是清楚他的效果
            obj.timer = setInterval(function() { //将传过来的数据变为一个对像里的值，这样会节省空间
                if (obj.offsetLeft >= det) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.left = obj.offsetLeft + 1 + 'px';
                }
            }, 30)
        }
        var zhu = document.querySelector('.zhu');
        tranfer(zhu, 400);

        var btn = document.querySelector('button');
        var fu = document.querySelector('.fu');
        btn.addEventListener('click', function() {
            tranfer(fu, 300);
        });
    </script>
</body>

</html>